<template>
  <Bg />
  <div
    class="w-full h-full grid grid-cols-4 gap-6 items-center justify-center min-h-screen px-8"
    style="height: calc(100vh - 64px); width: 100vw; position: absolute;" 
  >
    <div class="col-span-1 h-full w-full">
      <LeftPanel />
    </div>
    <div class="col-span-3 h-full w-full">
      <RightPanel />
    </div>
  </div>
</template>

<script setup lang="ts">
import Bg from '@/components/UI/bg.vue'
import LeftPanel from '@/components/LeftContainer.vue'
import RightPanel from '@/components/RightContainer.vue'
</script>

<style scoped>
.col-span-1, .col-span-3 {
  display: flex;
  flex-direction: column;
  height: 80%;
}
</style>
